<div class="bg-card flex h-full flex-auto flex-col dark:bg-default">
    <!-- Header -->
    <div class="flex h-18 flex-0 items-center justify-between border-b bg-gray-50 px-4 dark:bg-transparent">
        <div class="flex items-center">
            <button mat-icon-button (click)="drawer.close()">
                <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
            </button>
            <div class="ml-2 text-lg font-medium" data-testid="panel-title">{{ panelTitle() }}</div>
        </div>
        <div *ngIf="chat()?.id && chat()?.id !== 'new-chat'">
            <a *ngIf="databaseUrl()" [href]="databaseUrl()" target="_blank" class="ml-3" [matTooltip]="'View database entry'" data-testid="database-url-link">
                <mat-icon svgIcon="feather:database" class="scale-75"></mat-icon>
            </a>
        </div>
    </div>

    <div class="overflow-y-auto" [class.opacity-50]="settingsLoading() || isSavingName() || isDeletingChat()">
        <div class="px-7 py-6">
            <!-- Chat Name / Title -->
            <div *ngIf="chat() as currentChat">
                <div class="mb-4">
                    <div class="text-lg font-medium mb-1">Chat Title</div>
                    <div *ngIf="!isEditingName()" class="flex items-center">
                        <span class="text-secondary" data-testid="chat-title-display">{{ currentChat.title || 'Untitled Chat' }}</span>
                        <button mat-icon-button (click)="startEditName()" class="ml-2" [matTooltip]="'Edit title'" *ngIf="currentChat.id && currentChat.id !== 'new-chat'" data-testid="edit-name-btn">
                            <mat-icon [svgIcon]="'heroicons_outline:pencil'"></mat-icon>
                        </button>
                    </div>
                    <div *ngIf="isEditingName()" class="flex items-center space-x-2">
                        <input type="text" class="fuse-mat-input flex-auto" [ngModel]="editedName()" (ngModelChange)="editedName.set($event)" placeholder="Enter chat title" data-testid="name-input">
                        <button mat-flat-button color="primary" (click)="saveName()" [disabled]="isSavingName()" data-testid="save-name-btn">
                            <mat-icon *ngIf="!isSavingName()" [svgIcon]="'heroicons_outline:check'"></mat-icon>
                            <mat-progress-spinner *ngIf="isSavingName()" [diameter]="20" mode="indeterminate" data-testid="name-saving-spinner"></mat-progress-spinner>
                            <span *ngIf="!isSavingName()" class="ml-1">Save</span>
                        </button>
                        <button mat-button (click)="cancelEditName()" data-testid="cancel-edit-name-btn">Cancel</button>
                    </div>
                </div>

                <div class="mb-2 text-sm text-gray-500" data-testid="chat-id-display">
                    ID: {{ currentChat.id }}
                </div>
                <div class="mb-2 text-sm text-gray-500" *ngIf="currentChat.updatedAt">
                    Last Updated: {{ currentChat.updatedAt | date:'medium' }}
                </div>
                 <div class="mb-4 text-sm text-gray-500" *ngIf="currentChat.userId">
                    User ID: {{ currentChat.userId }}
                </div>
            </div>


            <!-- Message Generation Settings -->
            <div class="mt-6 space-y-4" *ngIf="settings">
                <div class="mb-2 text-lg font-medium">Message Generation Settings</div>
                <div class="space-y-1">
                    <div>
                        <label class="text-secondary font-medium">Temperature</label>
                        <span class="pl-2 font-bold text-secondary">{{settings().temperature}}</span>
                        <mat-slider [min]="0" [max]="2" [step]="0.1" data-testid="temperature-slider">
                            <input matSliderThumb [value]="settings().temperature ?? 0" (valueChange)="onSettingChange('temperature', $event)">
                        </mat-slider>
                    </div>
                    <div>
                        <label class="text-secondary font-medium">Top P</label>
                        <span class="pl-2 font-bold text-secondary">{{settings().topP}}</span>
                        <mat-slider [min]="0" [max]="1" [step]="0.05" data-testid="topP-slider">
                            <input matSliderThumb [value]="settings().topP ?? 0" (valueChange)="onSettingChange('topP', $event)">
                        </mat-slider>
                    </div>
                    <div>
                        <label class="text-secondary font-medium">Top K</label>
                        <span class="pl-2 font-bold text-secondary">{{settings().topK}}</span>
                        <mat-slider [min]="1" [max]="60" [step]="1" data-testid="topK-slider">
                            <input matSliderThumb [value]="settings().topK ?? 1" (valueChange)="onSettingChange('topK', $event)">
                        </mat-slider>
                    </div>
                    <div>
                        <label class="text-secondary font-medium">Presence Penalty</label>
                        <span class="pl-2 font-bold text-secondary">{{settings().presencePenalty}}</span>
                        <mat-slider [min]="0" [max]="2" [step]="0.1" data-testid="presencePenalty-slider">
                            <input matSliderThumb [value]="settings().presencePenalty ?? 0" (valueChange)="onSettingChange('presencePenalty', $event)">
                        </mat-slider>
                    </div>
                    <div>
                        <label class="text-secondary font-medium">Frequency Penalty</label>
                        <span class="pl-2 font-bold text-secondary">{{settings().frequencyPenalty}}</span>
                        <mat-slider [min]="0" [max]="2" [step]="0.1" data-testid="frequencyPenalty-slider">
                            <input matSliderThumb [value]="settings().frequencyPenalty ?? 0" (valueChange)="onSettingChange('frequencyPenalty', $event)">
                        </mat-slider>
                    </div>
                </div>
            </div>
            
            <div *ngIf="settingsError()" class="mt-4 p-3 bg-red-100 text-red-700 rounded" data-testid="settings-error-display">
                {{ settingsError() }}
            </div>
            
            <div *ngIf="settingsLoading()" class="mt-4 flex items-center justify-center">
                <mat-spinner diameter="24" data-testid="settings-loading-spinner"></mat-spinner>
                <span class="ml-2">Saving settings...</span>
            </div>

            <!-- Sharing Section -->
            <div class="mt-6 space-y-4" *ngIf="chat()?.id && chat()?.id !== 'new-chat'" data-testid="sharing-panel">
                <div class="mb-2 text-lg font-medium">Sharing</div>

                <div class="flex items-center justify-between">
                    <span class="font-medium">Public Access</span>
                    <mat-slide-toggle
                        data-testid="sharing-toggle"
                        [checked]="!!chat()?.shareable"
                        (change)="toggleSharing($event.checked)"
                        [disabled]="isUpdatingSharing()">
                        <input matSlideToggleThumb>
                    </mat-slide-toggle>
                </div>

                <div *ngIf="chat()?.shareable" class="mt-4">
                    <p class="font-medium">Anyone with the link can view</p>
                    <div class="flex items-center mt-2 space-x-2">
                        <mat-form-field class="flex-auto">
                            <input matInput [value]="getPublicLink()" readonly data-testid="public-link-input">
                        </mat-form-field>
                        <button mat-icon-button [cdkCopyToClipboard]="getPublicLink()" matTooltip="Copy link" data-testid="public-link-copy-btn">
                            <mat-icon svgIcon="heroicons_outline:clipboard-document"></mat-icon>
                        </button>
                    </div>
                </div>
            </div>


            <!-- Delete Chat Section -->
            <div class="mt-8 border-t pt-6" *ngIf="chat()?.id && chat()?.id !== 'new-chat'">
                <div class="text-lg font-medium text-red-600">Danger Zone</div>
                <div class="mt-2">
                    <button mat-stroked-button color="warn" (click)="deleteChat()" [disabled]="isDeletingChat()" data-testid="delete-chat-btn">
                        <mat-icon *ngIf="!isDeletingChat()" [svgIcon]="'heroicons_outline:trash'"></mat-icon>
                        <mat-progress-spinner *ngIf="isDeletingChat()" [diameter]="20" mode="indeterminate" data-testid="chat-deleting-spinner"></mat-progress-spinner>
                        <span *ngIf="!isDeletingChat()" class="ml-1">Delete Chat</span>
                        <span *ngIf="isDeletingChat()" class="ml-1">Deleting...</span>
                    </button>
                    <p class="text-sm text-gray-500 mt-1">This action cannot be undone.</p>
                </div>
            </div>
        </div>
    </div>
</div>
